<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/h-ui/css/H-ui.admin.css">
    <link rel="stylesheet" href="${ctx}/libjs/plugins/h-ui/style.css">
    <%--<script src="${ctx}/libjs/jquery.min.js"></script>--%>
    <%--<script src="${ctx}/libjs/bootstrap.js"></script>--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.3&key=e392de55be62b195115e32b97043a1bd&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="${ctx}/appjs/system/setting.js"></script>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">系统设置</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>卡券管理</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>活动统计</strong>' +
            '</li>' +
           /* '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +*/
            '</ol>';
    });

</script>

<style>


    .btn-group .btn-primary{ width: 0.3rem; background-color:#bfc7c9; border-color:#1ab39400}
    .btn-group .btn-primary:hover{  background-color:#2fb4da;}
    .btn-group .ischoice{  background-color:#2fb4da;}

</style>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="columns pull-left">
                        <h5 class="font-bold">活动统计</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                    <div class="btn-group" style="position: absolute; right:0.3rem;" >
                        <button type="button" id="dayId" class="btn btn-primary " onclick="getActivity(1);">日</button>
                        <button type="button" id="weekId" class="btn btn-primary ischoice"  onclick="getActivity(0);">周</button>
                    </div>
                </div>

                <div class="ibox-content" style="padding-bottom: 150px">
                    <div id="echartsId" style="width: 100%;height: 500px;">></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //重新加载的方法
    layui.config({
   /* base: '../../layuiadmin/' //这个就是你放Echart.js的目录*/
    base: '${ctx}/libjs/plugins/echarts/echarts.js/' //这个就是你放Echart.js的目录
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['element', 'echarts'], function() {
        var $ = layui.jquery ,
            echarts = layui.echarts;
    });
    var echartsId = echarts.init(document.getElementById('echartsId'));
    function getActivity(type) {
        if(type==0){
            $('#dayId').removeClass('ischoice')
            $('#weekId').addClass('ischoice')
        }else{
            $('#weekId').removeClass('ischoice')
            $('#dayId').addClass('ischoice')
        }

        $.ajax({
            url: jsctx+'/marketActivity/countMarcet',
            type: "GET",
            content: "application/json",
            data: {
                isDayMonth:type
            },
            success: function (res) {
                //debugger
                var data = res;
                console.log(data);
                /* var dateStr = data.dateStr;*/
                var optionchartZhe = {
                    title: {
                        show: false,
                        text: '活动统计',
                        x: 'center'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show:true,
                                excludeComponents :['toolbox'],
                                pixelRatio: 2
                            }
                        }
                    },
                    tooltip: {},
                    legend: { //顶部显示 与series中的数据类型的name一致
                        data: ['充值活动', '满减活动', '满返活动', '拉新活动']
                    },
                    xAxis: {
                        // type: 'category',
                        // boundaryGap: false, //从起点开始
                        data: res.dateStr
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '充值活动',
                        type: 'line', //线性
                        data: res.czLst,
                    }, {
                        name: '满减活动',
                        type: 'line', //线性
                        data: res.mjLst,
                    }, {
                        smooth: true, //曲线 默认折线
                        name: '满返活动',
                        type: 'line', //线性
                        data: data.mfLst,
                    }, {
                        smooth: true, //曲线
                        name: '拉新活动',
                        type: 'line', //线性
                        data: res.lxLst,
                    }]
                };
                echartsId.setOption(optionchartZhe, true);
            }
        })
    }
    getActivity(0)
    /*setting.init();*/
</script>
</body>
</html>
